<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>商品结构</title>
	<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.min.js"></script>
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/css/SUI.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/css/mui.min.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/other/all.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/app.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/other/app.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/dropload.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/font/iconfont.css">
	<style type="text/css">
		.distribution {padding-top: 55px;}
		.head {position: fixed;top: 0;left: 0;padding: 0px 45px;height: 45px;width: 100%;background-color: #fff;border-bottom: solid 1px #eee;z-index: 1;}
		.head .back {position: absolute;left: 0;top: 0;width: 45px;line-height: 45px;text-align: center;font-weight: 800;font-size: 18px;}
		.head .search-wrap {position: relative;width: 100%;height: 32px;top: 50%;margin-top: -16px;font-size: 12px;}
		.head .search-wrap .iconfont {position: absolute;left: 5px;top: 0;line-height: 32px;color: #aaa;font-size: 14px;}
		.head .search {width: 100%;height: 100%;padding: 5px 5px 5px 24px;margin: 0;background-color: rgb(245,245,245);box-sizing: border-box;border-radius: 3px;text-align: left;font-size: 12px;}
		.nav-wrap {display: flex;flex-wrap: wrap;padding: 5px;}
		.nav-wrap span {flex: 1;min-width: calc(25% - 10px);max-width: calc(25% - 10px);height: 38px;margin: 5px;line-height: 38px;text-align: center;}
		.nav-wrap a {display: block;width: 100%;height: 100%;box-sizing: border-box;border: 1px solid #fff;border-radius: 3px;background-color: #0a0603;font-weight: 800;color: #fff;}
		.nav-wrap a.on {border: 1px solid #fff; color: #fff;background: #fff;}
		.content-wrap {padding: 10px 0 0 10px;border-top: 1px solid #ebebeb;}
		.content {padding: 12px 10px;border-top: 1px solid #eaeaea;}
		.clear:after {display: block;content: '\20';clear: both;height: 0;visibility: hidden;}
		.pro-wrap {position: relative;float: left;overflow: hidden;width: calc(50vw - 15px);margin-right: 10px;margin-bottom: 10px;border-radius: 3px;background-color: #fff;}
		.pro-wrap .tag {position: absolute;right: 0;top: 0;width: 40px;}
		.pro-img-wrap {overflow: hidden;width: 100%; height: calc(50vw - 15px);}
		.pro-img-wrap img {position: relative;top: 50%;width: 100%;transform: translateY(-50%);}
		.pro-title {padding: 15px 15px 8px;}
		.pro-title span {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;height: 36px;line-height: 18px;}
		.pro-footer {padding: 0 15px 10px;}
		.pro-price {float: left;color: #e31939;}
		.pro-price .price {font-size: 1.4em;font-weight: 400;}
		.pro-price .rmb {font-size: 0.6em;font-weight: 500;}
		.pro-price .look {color: #ccc;font-size: 10px;}
		.pro-footer .scadd {float: right;color: #aaa;margin-right: -1px;}
		.banner-wrap {margin: 0 10px;max-height: 50vw;overflow: hidden;border-radius: 3px;}
		.banner-wrap img {width: 100%;}
		.column-wrap {margin: 0 10px 11px 0;}
		.column-wrap .c-title {position: relative;color: #333;line-height: 1.7em;font-weight: 500;padding-left: 5px;margin-bottom: 5px;font-size: 16px;}
		.column-wrap .c-title a {color: #333;font-size: 16px;font-weight: 500;}
		.column-wrap .c-title:before {display: block;content: '';position: absolute;top: 50%;left: 0;height: 16px;width: 2px;transform: translateY(-50%);background-color: #e54242;}
		.column-wrap .c-ctn {display: flex;flex-wrap: wrap;width: 100%;padding: 0 0 0 10px;margin-bottom: -10px;}
		.ctn-cell {flex: 1;min-width: 20%;max-width: calc(25% - 10px);display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 0 10px 10px 0;}
		.ctn-cell .img {position: relative;overflow: hidden;width: 100%;padding-bottom: 100%;border-radius: 3px;}
		.ctn-cell .img img {position: absolute;top: 50%;transform: translate(0, -50%);width: 100%;}
		.ctn-cell .text {white-space: nowrap;color: #999;line-height: 1.8em;font-size: 14px;}
		.column-wrap .c-footer {text-align: right;padding: 5px 0 5px;}
		.column-wrap .c-footer a {position: relative;display: inline-block;height: 24px;padding:0 5px;line-height: 24px;font-size: 16px;color: #666;}
		.column-wrap .c-footer a:after {content: '\20';display: block;position: absolute;left: 50%;bottom: -2px;width: 100%;height: 2px;border-radius: 5px;background-color: #e54242;transform: translate(-50%);}
		.windowcase-wrap {text-align: center;}
		.windowcase {display: inline-block;padding: 3px 17px;border-radius: 20px;color: #f4f4f4 !important;font-size: 13px;font-weight: 400;}
	</style>
</head>
<body>
<div class="distribution hotselling ">
	<div class="head">
		<div class="back iconfont icon-fanhui1" onclick="location = location.origin + '/mobile/index'"></div>
		<div class="search-wrap">
			<span class="iconfont icon-search"></span>
			<input type="search" class="search" name="search" placeholder="搜索商品">
		</div>
	</div>
	{{if .info.pathname}}
	<div class="banner-wrap">
		<img src="{{.info.pathname}}">
	</div>
	{{end}}
	<div class="nav-wrap">
		{{range .classify}}
		<span><a href="/mobile/product/struct?id={{.id}}" style="background-color: {{.themeColor}};{{if eq .id $.classifyId}}box-shadow: 0 0 5px {{.themeColor}};{{end}}" {{if eq .id $.classifyId}}class="on"{{end}}>{{.name}}</a></span>
		{{end}}
	</div>
	<div class="content-wrap clear">
		{{if eq .info.type "0"}}
			{{range .res}}
			<div class="pro-wrap">
				<div class="pro-img-wrap">
					<a href="/mobile/column/product_content?id={{.id}}">
						<img src="{{.pathname}}">
					</a>
				</div>
				<div class="pro-title">
					<a href="/mobile/column/product_content?id={{.id}}">
						<span>{{.title}}</span>
					</a>
				</div>
				<div class="pro-footer clear">
					<div class="pro-price">
						<span class="price"><span class="rmb">&yen;</span>{{if .vprice}}{{.vprice}}{{else}}{{.price}}{{end}}</span>
						<span class="look">{{.click}}人看过</span>
					</div>
					<span class="iconfont scadd" data-id="{{.id}}" data-minbuy='{{.minbuy}}'>&#xe619;</span>
				</div>
				{{if eq .active 1}}
				<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/gbuy.png" class="tag">
				{{else if eq .active 2}}
				<img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/sales.png" class="tag">
				{{end}}
			</div>
			{{end}}
		{{else}}
			<div class="windowcase-wrap">
				<a href="javascript: void(0)" class="windowcase" data-sid="{{$.info.id}}" style="background-color: {{if .currentColor}}{{.currentColor}}{{else}}#f1c40f{{end}};">橱窗展示&nbsp;&gt;&gt;</a>
			</div>
			{{range $i,$v := .res}}
				{{if $v}}
				<div class="column-wrap">
					<div class="c-title">
						<a href="/mobile/column/list?id={{.id}}&proStructId={{$.info.id}}">{{.name}}</a>
					</div>
					<div class="c-ctn">
						{{range .ctn}}
						<div class="ctn-cell">
							<div class="img">
								<a href="/mobile/column/list?id={{.id}}&proStructId={{$.info.id}}">
									<img src="{{if .pathname}}{{.pathname}}{{else}}/static/wechat/img/logo.png{{end}}">
								</a>	
							</div>
							<a class="text" href="/mobile/column/list?id={{.id}}&proStructId={{$.info.id}}">{{.name}}</a>
						</div>
						{{end}}
					</div>
					<!-- <div class="c-footer">
						<a href="javascript: void(0)" class="windowcase" data-cid="{{.id}}" data-sid="{{$.info.id}}">橱窗展示&nbsp;&gt;&gt;</a>
					</div> -->
				</div>
				{{end}}
			{{end}}
		{{end}}
	</div>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/other/app.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/js/SUI.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/zepto.min.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/dropload.min.js"></script>
<script>
	var page = 2;
	var type = {{.info.type}}
	var url = "https://tcsc.oss-cn-hangzhou.aliyuncs.com"
	if (type == 0) {
		$('.content-wrap').dropload({
		    scrollArea : window,
		    loadDownFn : function(me){
		        $.ajax({
		            type: 'GET',
		            url: window.location.href,
		            dataType: 'json',
		            data:{page:page},
		            success: function(data){
		            	var pros = data.res
		                if (pros) {
		                	me.resetload();
		                	for (var i in pros) {
		                		var div = document.createElement("div");
		                		var html = ""
		                		var v = pros[i]
			                	html = `<div class="pro-wrap">
											<div class="pro-img-wrap">
												<a href="/mobile/column/product_content?id=${v.id}">
													<img src="${v.pathname}">
												</a>
											</div>
											<div class="pro-title">
												<a href="/mobile/column/product_content?id=${v.id}">
													<span>${v.title}</span>
												</a>
											</div>
											<div class="pro-footer clear">
												<div class="pro-price">
													<span class="price"><span class="rmb">&yen;</span>${v.vprice ? v.vprice : v.price}</span>
													<span class="look">${v.click}人看过</span>
												</div>
												<span class="iconfont scadd" data-id="${v.id}">&#xe619;</span>
											</div>
											${v.active == 1 ? `<img src="`+url+`/static/wechat/img/gbuy.png" class="tag">` : ``}
											${v.active == 2 ? `<img src="`+url+`/static/wechat/img/sales.png" class="tag">` : ``}
										</div>`
								div.innerHTML = html
								$('.dropload-down').before(div)
								div = null
							}
		                	page++
		                	me.resetload();
		                }else{
		                    mui.toast("没有更多了！");
		                    $(".dropload-down").remove();
		                }
		            },
		            error: function(xhr, type){
		                mui.toast("网络慢，请重新刷新!");
		                me.resetload();
		            }
		        });
		    }
		});
	}
	$('.windowcase').on('tap', function () {
		var sid=$(this).attr('data-sid')
		$.ajax({
			url: '/mobile/product/struct/iswindowcase',
			data: {
				sid: sid
			},
			success: function (res) {
				if (res.status === 1) {
					location = '/mobile/product/struct/windowcase?sid='+sid
				} else {
					mui.toast('暂无展示图~')
				}
			}
		})
	})
	$('.search').keydown(function (events) {
            if (events.which == 13) {
            	var href = location.href;
            	var val = encodeURIComponent($(this).val());
            	if (location.search) {
            		var searchArr = location.search.substring(1).split('&')
            		var index = searchArr.findIndex(function (v) { return v.startsWith('search') })
            		if (index != -1) {
            			searchArr[index] = 'search=' + val
            			location = location.origin + location.pathname + '?' + searchArr.join('&')
            		} else {
            			location = href + '&search=' + val
            		}
            	} else {
            		location = location.origin + location.pathname + '?search=' + val
            	}
            }
        });

mui('body').on('tap','.scadd',function(e){
	stopPropagation(e)
	var pid=this.getAttribute("data-id")
	var minbuy=this.getAttribute("data-minbuy")
	var data={num:1,pid:pid,minbuy:minbuy}
	mui.get("/mobile/isshopcar",{pid:pid},function(res){
		console.log(res)
		if (minbuy>1 && !res.isshopcar) {
			mui.confirm("该产品的最小购买数为"+minbuy,"提示",["否","是"],function(res){
				if (res.index==1) {
					mui.post('/mobile/shopcar',data,function(res){
						if(res==2||res==962){
							mui.confirm("您还未登入,请先登入","提示",function(res){
								if(res.index){
									mui.closePopups()
									window.location.href="/mobile/login"
								}
							})
						}else if(res==1){
							mui.toast("添加成功~")
						}else if(res==0){
							mui.toast("网络繁忙,请重试!")
						}else if(res==3){
				          mui.toast('库存不足');
				        }
					})
				} else {
					console.log(res)
				}
			},"div")
		} else {
			mui.post('/mobile/shopcar',data,function(res){
				if(res==2||res==962){
					mui.confirm("您还未登入,请先登入","提示",function(res){
						if(res.index){
							mui.closePopups()
							window.location.href="/mobile/login"
						}
					})
				}else if(res==1){
					mui.toast("添加成功~")
				}else if(res==0){
					mui.toast("网络繁忙,请重试!")
				}else if(res==3){
		          mui.toast('库存不足');
		        }
			})
		}
	})
})

</script> 
</body>
</html>